<template>
  <div class="home">
    <header>
      <!-- socket 连接状态 -->
      <div style="margin-right: 10px">
        <el-button
          v-if="isConnect"
          icon="el-icon-check"
          size="mini"
          circle
          type="success"
        ></el-button>
        <el-button
          v-else
          size="mini"
          type="danger"
          icon="el-icon-warning"
          circle
        ></el-button>
      </div>
      <h1>DES 暴力破解数据大屏</h1>
    </header>
    <main>
      <div>下一次刷新：{{ countdown }}s</div>
      <KeyChunkCharts
        v-if="keyChunkStastatus.length !== 0"
        :datas="keyChunkStastatus"
        :count="num"
      />
    </main>
  </div>
</template>

<script>
import KeyChunkCharts from "./KeyChunkChart.vue";
import { io } from "socket.io-client";
export default {
  name: "HomeView",
  data() {
    return {
      isConnect: false,
      keyChunkStastatus: [],
      socket: {},
      countdown: 30,
      num: 0,
    };
  },
  components: {
    KeyChunkCharts,
  },

  mounted() {
    const socket = io("http://localhost:3001/admin");
    this.socket = socket;
    // 初次连接
    socket.on("conn", (code) => {
      if (code === 2000) {
        this.isConnect = true;
      } else {
        this.isConnect = false;
      }
    });

    // 接收密钥块统计
    socket.on("s-q-keyChunkStastatusStatistics", (data) => {
      console.log("upda");
      console.log(data.data[1].value);
      this.keyChunkStastatus = data.data;
    });

    this.getChunkStatistics();
    // 倒计时
    setInterval(() => {
      this.countdown = this.countdown - 1;
      if (this.countdown == 0) {
        this.countdown = 30;
        this.getChunkStatistics();
      }
    }, 1000 * 1);
  },

  methods: {
    // 请求 密钥快统计
    getChunkStatistics() {
      this.socket.emit("c-q-keyChunkStastatusStatistics");
    },
  },
};
</script>

<style scoped>
header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
h1 {
  margin: 0;
}
</style>
